<template>
	<view class="mainpadding" v-if="pageShow" style="padding-bottom: 150rpx;">
		<view class="" v-for="(item,index) in goods" :key="item.id">
			<view class="flexbetween margin_top">
				<image class="sptp" :src="item.image_text" mode=""></image>
				<view class="" style="width: 73%;">
					<view class="titletext xiaohei yhxk">{{item.title}}</view>
					<view class="strongtext xiaohei margin_top2 yhxk">{{item.difference}}</view>
					<view class="flexbetween margin_top2">
						<view class="titletext xiaocheng">¥{{item.price}}</view>
						<view class="ershil xiaocheng">x{{item.number}}</view>
					</view>
				</view>
			</view>
			<view class="sanshier xiaohei fonweight margin_top">商品评分</view>
			<view class="flexleft margin_top2">
				<view class="ershiba xiaohei margin_right2">描述相符</view>
				<view class="margin_right2">
					<u-rate :count="5" v-model="item.star" active-color="#ff9341" inactive-color="#b2b2b2"></u-rate>
				</view>
			</view>
			<view class="sanshier xiaohei fonweight margin_top">商品评价</view>
			<textarea class="textarea margin_top" placeholder="请输入您的评价" v-model="item.content"></textarea>
			<view class="sanshier xiaohei fonweight margin_top">上传图片</view>
			<view class="flexleft flex_wrap">
				<view class="flexcenter tpbox " v-for="(ite,ind) in item.plimages_text" :key="ind">
					<view class="tjtp">
						<image class="" :src="ite" mode=""></image>
						<view class="deleteimg" @click="currentindex=index;deleteimg(ind,item.plimages,item.plimages_text)"></view>
					</view>
				</view>
				<view class="flexcenter tpbox " v-if="item.plimages_text.length<3" @click="currentindex=index;uploadImg(3,item.plimages,item.plimages_text)">
					<image class="tjtp" src="@/static/image/system/upimg.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding">
			<view class="bigbtn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				goods: [],
				pageShow: false,
				currentindex:0
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		methods: {
			upvideo() { //上传视频
				let uploadFile = ''
				let _this = this;
				// 1.选择要上传的视频
				uni.chooseVideo({
					maxDuration: 60, // 拍摄视频最长拍摄时间，单位秒。最长支持 60 秒。
					sourceType: ['album', 'camera'], // album 从相册选视频，camera 使用相机拍摄，默认为：['album', 'camera']
					success: function(res) {
						_this.uploadImageServicet(res.tempFilePath)
					}
				});
			},
			uploadImageServicet(url) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.goods[this.currentindex].video_url = res.url
					this.goods[this.currentindex].video_url_text = image_item
				}).catch(err => {});
			},
			submit(){
				let commnetData = []
				for(let i=0;i<this.goods.length;i++){
					let item = this.goods[i]
					if(item.star==0){
						httpRequest.toast("请对"+item.title+"进行打分打分")
						return false
					}
					if(item.content==""){
						httpRequest.toast("请对"+item.title+"做出文字评价")
						return false
					}
					commnetData.push({
						order_goods_id:item.id,
						content:item.content,
						images:item.plimages.join(),
						star:item.star
					})
				}
				uni.showLoading({
					title:"请稍后",
					mask:true,
				})
				httpRequest.request('/api/order/commentOrder', 'POST', {
					order_id:this.listid,
					commnetData:commnetData
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if(res.code==1){
						setTimeout(()=>{
							uni.navigateBack(1)
						}, 1000);
					}
					
				})
			},
			deleteimg(index, upImgs, upImgs_text) {
				upImgs.splice(index, 1)
				upImgs_text.splice(index, 1)
			},
			uploadImg(value, upImgs, upImgs_text) {
				let _this = this;
				let num = 1
				if (value > 2) {
					num = Number(value) - upImgs.length;
					if (num <= 0) {
						return false;
					}
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], upImgs, upImgs_text)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			uploadImageService(url, upImg, upImgs_text) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.goods[this.currentindex].plimages.push(res.url)
					this.goods[this.currentindex].plimages_text.push(image_item)
					// upImg.push(res.url)
					// upImgs_text.push(image_item)
				}).catch(err => {});
			},
			getDetail() {
				httpRequest.request('/api/order/getOrderInfo', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					res.data.goods.forEach(item=>{
						this.$set(item,"content","")
						this.$set(item,"plimages",[])
						this.$set(item,"plimages_text",[])
						this.$set(item,"video_url","")
						this.$set(item,"video_url_text","")
						this.$set(item,"star",0)
					})
					this.goods = res.data.goods
					this.pageShow = true
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scyyzz {
		width: 100%;
		height: 291rpx;
	}
	.sptp {
		width: 150rpx;
		height: 150rpx;
		min-width: 150rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
	}
	.tpbox {
		width: 33.33%;
		margin-top: 30rpx;
	}

	.tjtp {
		width: 209rpx;
		height: 209rpx;
		position: relative;
	
		image {
			border-radius: 10rpx;
			width: 100%;
			height: 100%;
		}
	}

	.textarea {
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		background: #F9F9F9;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.sptup {
		width: 176rpx;
		height: 176rpx;
		border-radius: 20rpx;
	}
</style>